import React, { useState, useEffect } from 'react';

import { Input, List, Button, Pagination, Tabs, Modal, Select, InputNumber, Popconfirm } from 'antd';
import { fetchsync_util, convertISODateTimeToYYYYMMDDHHMM, openNotification_util } from '../util/util.js'
import { useHistory } from 'react-router-dom';

var storage = window.localStorage;
const { Search } = Input;

const Normalitem = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var height = props.height
  return (
    <div style={{ width: "95%", marginLeft: "2.5%", height: height ? height : "0.8rem", position: "relative" }}>
      <div style={styles.lineitemnormal}>
        <span style={props.styleobj}>
          &nbsp;&nbsp;{props.label}&nbsp;:&nbsp;</span>
        <span style={props.styleobjright}>{fitem[fkey]}</span>
      </div>
      <div style={styles.lineleftstyle}>
      </div>
    </div>)

}

const Normalitemtwo = (props) => {
  var fitem = props.item
  var fkey = props.keyd
  var fkeytwo = props.keydtwo
  return (
    <div style={styles.listitemnormal}>
      <div style={styles.listitemleft}>
        &nbsp;&nbsp;{props.label}:&nbsp;&nbsp;

        <span style={{ fontWeight: "800", color: fitem[fkey] == '不合格' ? 'red' : 'green' }}>
          {fitem[fkey]}</span></div>
      <div style={{ width: "50%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" }}>
        {props.labeltwo}:&nbsp;&nbsp;{fitem[fkeytwo]}&nbsp;&nbsp;</div>
    </div>

  )

}

const Mobile_sltzd_llj = () => {
  const history = useHistory();

  const [pagedata, setpagedata] = useState({
    ddata: [],
    filterdata: [],
    totalnum: "",
    pagesize: 5,
    current: 1,
    nowddata: []
  })
  const [activeKey, setActiveKey] = useState('1')
  const [showLlj, setShowLlj] = useState(false)
  const [jyjg, setJyjg] = useState('')
  const [jys, setJys] = useState('')
  const [bls, setBls] = useState(0)
  const [bz, setBz] = useState('')
  const [selectedItem, setSelectedItem] = useState({})

  //rtdata处理
  const dealwithrtdata = (obj) => {
    const ddd = [];
    for (let i = 0; i < obj.length; i++) {
      var origindata = obj[i];
      for (var keyt in origindata) {
        origindata[keyt] = origindata[keyt] ? origindata[keyt] : ""
      }
      origindata.key = i;
      origindata.xuhao = i + 1;
      origindata.index = i + 1;
      origindata['djrq'] = origindata['djrq'].substring(0, 10)
      ddd.push(origindata)
    }

    var nowddata = ddd.slice(0, pagedata.pagesize);
    var totalnum = ddd.length
    // console.log(totalnum,nowddata,ddd);
    setpagedata(Object.assign({}, pagedata, { ddata: ddd, totalnum, nowddata, current: 1 }));

  }

  //查询方法
  const query = async (type) => {
    const url = type == '未检验' ? "/admin/cggl/sltzd_list_mobile_wj" : "/admin/cggl/sltzd_list_mobile_yj"
    let data = await fetchsync_util(url, 'POST', {}, "json")
    // console.log(data)
    dealwithrtdata(data.resultdata);
  }

  //登出
  const handlelogout = () => {
    storage.islogin = 'loginout'
    history.push({ pathname: '/mobile_login' });
  }

  //进入来料检
  const tollj = (item, type) => {
    // console.log(item, type)
    setSelectedItem(item)
    setShowLlj(true)
    if (type == '未检验') {
      setJyjg('')
      setJys(0)
      setBls(0)
      setBz('')
    }
    else {
      setJyjg(item.sfllj)
      setJys(item.jys)
      setBls(item.bls)
      setBz(item.bz)
    }
    // storage.preitem_cgrk = JSON.stringify(item);
    // history.push({ pathname: '/shipSRM/cgrk/mobile_cgrk_llj' });

  }

  //去首页
  const handletomainpage = () => {
    history.push({ pathname: '/shipSRM_mobile/mobile_mainpage' });
  }


  const searchbydjbh = async (e) => {
    const url = activeKey == '1' ? "/admin/cggl/sltzd_list_mobile_wj" : "/admin/cggl/sltzd_list_mobile_yj"
    let data = await fetchsync_util(url, 'POST', { 'keyword': e }, "json")
    dealwithrtdata(data.resultdata);
  }


  const onShowSizeChange = (page) => {

    var ddata = pagedata.ddata;
    var indxstart = pagedata.pagesize * (page - 1)
    var indxend = indxstart + pagedata.pagesize
    // console.log(indxstart, indxend, page, pagedata);
    var nowddata = pagedata.ddata.slice(indxstart, indxend)
    var nowddata = ddata.slice(indxstart, indxend)
    setpagedata(Object.assign({}, pagedata, { current: page, nowddata: nowddata }));
  }

  const onOK = async () => {
    if (jyjg == '') {
      openNotification_util("请填写检验结果")
      return
    }
    let data = await fetchsync_util("/admin/cggl/updateSltzdJyzt", 'POST', { 'mxid': selectedItem.id, jyjg, jys, bls, bz }, "json")
    setJyjg('')
    setJys('')
    setBz('')
    setSelectedItem({})
    setShowLlj(false)
    await query(activeKey == '1' ? '未检验' : '已检验')
  }


  //componentdidmount
  useEffect(() => {
    query('未检验');
  }, []);



  return (


    <div style={{ height: "100vh", width: "100%", position: 'relative', backgroundColor: "white" }}>
      {/* 首页  */}
      <div style={{
        width: "100%", height: "50vw", backgroundImage: "linear-gradient(to bottom, #091dd4 , #1f8ddc)",
        position: "relative", fontSize: "0.9rem", textIndent: "2rem", fontWeight: "500", color: "white", borderRadius: "0 0 15px 15px"
      }} >
        <br />&nbsp;&nbsp;&nbsp;&nbsp;收料报检单 · 来料检
        <Button type="primary" style={{ backgroundColor: "rgba(0,0,0,0.1)", height: "18%", position: "absolute", right: "1%", top: "5%", textAlign: "center" }}
          onClick={handlelogout}>
          登出
        </Button>
        <Button type="primary" style={{ backgroundColor: "rgba(0,0,0,0.1)", height: "18%", position: "absolute", right: "18%", top: "5%", textAlign: "center" }}
          onClick={handletomainpage}>
          首页
        </Button>
      </div>
      {/* 来料检  */}
      <Modal open={showLlj} style={{ top: "5vh" }} width="96vw" onCancel={() => { setShowLlj(false) }} destroyOnClose={true}
        onOk={() => { onOK() }} okText="确定" cancelText="取消"
      >
        <div style={{ width: "95%", marginLeft: "2.5%", marginTop: "3vh", position: "relative" }}>
          <div style={{ position: 'relative', height: '12vw' }}>
            <div style={{ position: 'absolute', left: '0', top: '0', width: '30%' }}>
              <span style={{ color: 'red' }}>*</span>物料名称：
            </div>
            <div style={{ position: 'absolute', right: '0', top: '0', width: '70%' }}>
              <Input value={selectedItem.wlmc} disabled
                style={{ width: '100%' }} />
            </div>
          </div>
          <div style={{ position: 'relative', height: '12vw' }}>
            <div style={{ position: 'absolute', left: '0', top: '0', width: '30%' }}>
              <span style={{ color: 'red' }}>*</span>规格型号：
            </div>
            <div style={{ position: 'absolute', right: '0', top: '0', width: '70%' }}>
              <Input value={selectedItem.ggxh} disabled
                style={{ width: '100%' }} />
            </div>
          </div>
          <div style={{ position: 'relative', height: '12vw' }}>
            <div style={{ position: 'absolute', left: '0', top: '0', width: '30%' }}>
              <span style={{ color: 'red' }}>*</span>收料数量：
            </div>
            <div style={{ position: 'absolute', right: '0', top: '0', width: '70%' }}>
              <Input value={selectedItem.slsl} disabled
                style={{ width: '100%' }} />
            </div>
          </div>
          <div style={{ position: 'relative', height: '12vw' }}>
            <div style={{ position: 'absolute', left: '0', top: '0', width: '30%' }}>
              <span style={{ color: 'red' }}>*</span>检验结果：
            </div>
            <div style={{ position: 'absolute', right: '0', top: '0', width: '70%' }}>
              <Select value={jyjg}
                style={{ width: '100%' }} options={[{ value: '合格', label: '合格' }, { value: '不合格', label: '不合格' }]}
                onChange={(e) => { setJyjg(e) }} />
            </div>
          </div>
          <div style={{ position: 'relative', height: '12vw' }}>
            <div style={{ position: 'absolute', left: '0', top: '0', width: '30%' }}>
              <span>检验数量：</span>
            </div>
            <div style={{ position: 'absolute', right: '0', top: '0', width: '70%' }}>
              <InputNumber style={{ width: '100%' }} value={jys} onChange={(e) => { setJys(e) }} />
            </div>
          </div>
          <div style={{ position: 'relative', height: '12vw' }}>
            <div style={{ position: 'absolute', left: '0', top: '0', width: '30%' }}>
              <span style={{ color: 'red' }}>*</span><span>不良数量：</span>
            </div>
            <div style={{ position: 'absolute', right: '0', top: '0', width: '70%' }}>
              <InputNumber style={{ width: '100%' }} value={bls} onChange={(e) => { setBls(e) }} />
            </div>
          </div>
          <div style={{ position: 'relative', height: '12vw' }}>
            <div style={{ position: 'absolute', left: '0', top: '0', width: '30%' }}>
              <span>备注：</span>
            </div>
            <div style={{ position: 'absolute', right: '0', top: '0', width: '70%' }}>
              <Input value={bz} onChange={(e) => { setBz(e.target.value) }} />
            </div>
          </div>
        </div>
      </Modal>

      <div style={{ width: "100%", position: "absolute", top: "12vh", borderRadius: "10px" }}>
        <div style={{ width: "98vw", backgroundColor: "#FFFFFF", marginLeft: "1vw" }}>
          {/* <Button type="primary" style={{ margin: "2%", fontSize: "0.8rem", height: "1.5rem", backgroundColor: "#41A508", lineHeight: "0.8rem" }}
            onClick={handletbfhtzd}>同步收料报检单</Button> */}
          <div style={{ width: "100%", height: "6vh", position: "relative", lineHeight: '6vh' }}>
            <div style={{ width: "95%", height: "100%", position: "absolute", left: "4%", top: "0", textAlign: "left" }}>
              <span style={{ fontWeight: "800" }}>查询条件</span>：
              <Search
                placeholder="根据单据号，物料名称，规格型号查询"
                onSearch={(e) => { searchbydjbh(e) }}
                style={{ width: '70vw', marginTop: '0.2rem' }}
              />
            </div>
          </div>
          < Tabs centered activeKey={activeKey} onChange={(e) => {
            if (e == '1') {
              query('未检验')
            } else {
              query('已检验')
            }
            setActiveKey(e)
          }}
            items={[
              {
                label: `未检验`,
                key: '1',
                children: (
                  <List
                    itemLayout="horizontal"
                    dataSource={pagedata.nowddata}
                    renderItem={item => (

                      <div style={{
                        height: "11rem", width: "95%", marginLeft: "2.5%", backgroundColor: "white", marginTop: "0.5rem", position: "relative", paddingTop: "0.5rem",
                        fontWeight: "400", fontSize: "0.6rem", borderRadius: "5px", overflow: "hidden", textAlign: 'left', boxShadow: "0px 0px 5px  rgba(0, 0, 0, 0.25)",
                        borderStyle: "none", borderWidth: "0.05rem", borderColor: "#B8B8B8"
                      }}
                      >
                        <div style={styles.linenormal}>
                          <div style={{ width: "50%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left", fontWeight: "700" }}>
                            &nbsp;&nbsp;序号：{item.index}</div>
                          <div style={styles.lineleftstyle}>
                            <span style={{ fontWeight: "bolder" }}></span>&nbsp;&nbsp;</div>
                        </div>
                        <Normalitem label="单据号" keyd="djh" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="单据日期" keyd="djrq" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="供应商名称" keyd="gysmc" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="物料名称" keyd="wlmc" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="规格型号" keyd="ggxh" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitemtwo label="采购数量" keyd="cgsl" labeltwo="收料数量" keydtwo="slsl" item={item} />
                        <Normalitem label="检验数量" keyd="jys" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="检验结果" keyd="sfllj" item={item} styleobj={{ fontWeight: "800" }} styleobjright={{ fontWeight: "800" }} />
                        <Normalitem label="备注" keyd="bz" item={item} styleobj={{ fontWeight: "800" }} />

                        <Button type="primary" style={{
                          width: "30%", margin: "2.5%", fontSize: "0.6rem", height: "1.32rem",
                          background: (item.sfllj != "是") ? '#1515db' : '#389e0d', border: "none",
                          lineHeight: "0.6rem"
                        }} onClick={() => { tollj(item, '未检验') }}>
                          {"来料检"}</Button>

                      </div>

                    )}
                  />),
              },
              {
                label: `已检验`,
                key: '2',
                children: (
                  <List
                    itemLayout="horizontal"
                    dataSource={pagedata.nowddata}
                    renderItem={item => (

                      <div style={{
                        height: "11.5rem", width: "95%", marginLeft: "2.5%", backgroundColor: "white", marginTop: "0.5rem", position: "relative", paddingTop: "0.5rem",
                        fontWeight: "400", fontSize: "0.6rem", borderRadius: "5px", overflow: "hidden", textAlign: 'left', boxShadow: "0px 0px 5px  rgba(0, 0, 0, 0.25)",
                        borderStyle: "none", borderWidth: "0.05rem", borderColor: "#B8B8B8"
                      }}
                      >
                        <div style={styles.linenormal}>
                          <div style={{ width: "50%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left", fontWeight: "700" }}>
                            &nbsp;&nbsp;序号：{item.index}</div>
                          <div style={styles.lineleftstyle}>
                            <span style={{ fontWeight: "bolder" }}></span>&nbsp;&nbsp;</div>
                        </div>

                        <Normalitem label="单据号" keyd="djh" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="单据日期" keyd="djrq" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="供应商名称" keyd="gysmc" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="物料名称" keyd="wlmc" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="规格型号" keyd="ggxh" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitemtwo label="采购数量" keyd="cgsl" labeltwo="收料数量" keydtwo="slsl" item={item} />
                        <Normalitem label="检验数量" keyd="jys" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="不良数量" keyd="bls" item={item} styleobj={{ fontWeight: "800" }} />
                        <Normalitem label="检验结果" keyd="sfllj" item={item} styleobj={{ fontWeight: "800" }} styleobjright={{ fontWeight: "800" }} />
                        <Normalitem label="备注" keyd="bz" item={item} styleobj={{ fontWeight: "800" }} />
                        <Button type="primary" style={{
                          width: "30%", margin: "2.5%", fontSize: "0.6rem", height: "1.32rem",
                          background: (item.sfllj != "是") ? '#1515db' : '#389e0d', border: "none",
                          lineHeight: "0.6rem"
                        }} onClick={() => { tollj(item, '已检验') }}>
                          {"来料检"}</Button>

                      </div>

                    )}
                  />),
              }
            ]} />

        </div>
        <Pagination size="small" defaultCurrent={1} total={pagedata.totalnum} style={{ marginTop: "1rem", marginBottom: "1rem" }}
          onChange={onShowSizeChange} current={pagedata.current} pageSize={pagedata.pagesize}
        />

      </div>

    </div>
  )

}


export default Mobile_sltzd_llj

var styles = {
  titlestyle: {
    height: "6%", width: "100%", position: "absolute", right: "0", lineHeight: "6vh", textIndent: "0rem", textAlign: "center",
    top: "0", backgroundColor: "#a91f24", color: "white", fontSize: "0.9rem", fontWeight: "bolder"
  },
  containertyle: {
    height: "93%", width: "100%", position: "absolute", right: "0", bottom: "0", backgroundColor: "", overflow: "scroll"
  },
  maincontainer: {
    width: "100%", position: "absolute", top: "0%", height: "100%", backgroundColor: "white", overflowY: "scroll", overflowX: "hidden"
  },
  listitemnormal: { width: "100%", height: "0.8rem", position: "relative", fontWeight: "800" },
  linenormal: { width: "95%", marginLeft: "2.5%", height: "0.8rem", position: "relative" },
  lineitemnormal: { width: "100%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left" },
  lineitemborder: { width: "100%", height: "100%", position: "absolute", left: "0", top: "0", textAlign: "left", fontWeight: "bolder" },
  lineleftstyle: { width: "50%", height: "100%", position: "absolute", right: "0", top: "0", textAlign: "left" },
  listitemleft: { width: "50%", height: "100%", position: "absolute", left: "2%", top: "0", textAlign: "left" }
}